Nested Routes এবং Dynamic Segments

Web Development - এমবারজেএস (EmberJS) - Ember.js Router এবং Routes

207

Ember.js একটি শক্তিশালী ফ্রেমওয়ার্ক, যা Nested Routes এবং Dynamic Segments এর মাধ্যমে জটিল রাউটিং এবং ডেটা ম্যানেজমেন্টকে সহজ করে তোলে। এই দুটি বৈশিষ্ট্য Ember.js অ্যাপ্লিকেশনে URL-এর সঙ্গে সম্পর্কিত ডেটা এবং ভিউ ম্যানেজ করার জন্য গুরুত্বপূর্ণ। এখানে Nested Routes এবং Dynamic Segments সম্পর্কে বিস্তারিত আলোচনা করা হচ্ছে।

Nested Routes (নেস্টেড রাউট)

Nested Routes হল একটি রাউটের মধ্যে অন্য রাউট থাকা, যা Ember.js-এ অ্যাপ্লিকেশনের ভিতরে একাধিক স্তরের রাউট তৈরি করতে ব্যবহৃত হয়। এটি বড় এবং জটিল অ্যাপ্লিকেশনে বিভিন্ন ভিউ এবং ডেটার মধ্যে সম্পর্ক স্থাপন করতে সাহায্য করে।

Nested Routes কিভাবে কাজ করে:

এমবারজেএস-এ Nested Routes তৈরি করতে Router.map() ফাংশনের মাধ্যমে অভ্যন্তরীণ রাউট (nested routes) কনফিগার করা হয়। নেস্টেড রাউটগুলির মধ্যে parent রাউট এবং child রাউট থাকে, যেখানে child রাউট parent রাউটের ভিতরে রেন্ডার হয়।

Nested Routes তৈরি করা

ধরা যাক, আপনি একটি Blog অ্যাপ্লিকেশন তৈরি করছেন, যেখানে একটি Post রাউট এবং তার ভিতরে থাকা একটি Comments রাউট রয়েছে। এভাবে Nested Routes কনফিগার করা হবে:

// app/router.js
Router.map(function() {
  this.route('blog', function() {
    this.route('post', { path: '/:post_id' }, function() {
      this.route('comments');
    });
  });
});

এখানে:

blog হল parent রাউট।
post হল child রাউট, যা :post_id ডাইনামিক সেগমেন্টের মাধ্যমে একটি নির্দিষ্ট পোস্টের জন্য রেন্ডার হবে।
comments হল একটি নেস্টেড রাউট, যা post রাউটের ভিতরে থাকবে।

Nested Routes-এর ব্যবহার

এখন, post রাউটে একটি নির্দিষ্ট পোস্টের জন্য ডেটা লোড করা হবে, এবং comments রাউটে সেই পোস্টের মন্তব্যগুলো দেখানো হবে।

// app/routes/blog/post.js
import Route from '@ember/routing/route';

export default class BlogPostRoute extends Route {
  model(params) {
    return this.store.find('post', params.post_id);  // `:post_id` অনুযায়ী পোস্ট ডেটা ফেচ করা হবে।
  }
}

এখানে, params.post_id ব্যবহার করে নির্দিষ্ট পোস্টের ডেটা লোড করা হয়েছে।

Dynamic Segments (ডাইনামিক সেগমেন্ট)

Dynamic Segments হল URL-এর অংশ, যা চলমান অ্যাপ্লিকেশনের ডেটা অনুযায়ী পরিবর্তিত হয়। ডাইনামিক সেগমেন্ট ব্যবহার করে, আপনি URL-এ ভেরিয়েবল বা প্যারামিটার অন্তর্ভুক্ত করতে পারেন, যা অ্যাপ্লিকেশনের মডেল লোড করতে ব্যবহৃত হয়।

এটি সাধারণত রাউটের পাথের অংশ হিসেবে ব্যবহৃত হয়, যেমন /post/:post_id যেখানে :post_id একটি ডাইনামিক সেগমেন্ট।

Dynamic Segments কিভাবে কাজ করে:

Ember.js-এ ডাইনামিক সেগমেন্ট তৈরি করতে Router.map() ফাংশনে : (콜ন) চিহ্ন ব্যবহার করা হয়। এটি URL-এর নির্দিষ্ট অংশকে ডাইনামিক সেগমেন্ট হিসেবে চিহ্নিত করে, যা চলতি রাউটে ডেটা লোড করার সময় ব্যবহৃত হয়।

Dynamic Segment ব্যবহার উদাহরণ

ধরা যাক, আমরা একটি post রাউট তৈরি করতে চাই যেখানে পোস্টের আইডি ডাইনামিকভাবে URL থেকে নেওয়া হবে। এর জন্য Ember.js রাউটে Dynamic Segment ব্যবহার করা যাবে।

// app/router.js
Router.map(function() {
  this.route('post', { path: '/post/:post_id' });
});

এখানে :post_id হল একটি ডাইনামিক সেগমেন্ট, যা URL থেকে এক্সট্র্যাক্ট করা হবে।

Dynamic Segment-এর মাধ্যমে মডেল ফেচ করা

এখন, post রাউটে একটি নির্দিষ্ট পোস্ট ফেচ করার জন্য ডাইনামিক সেগমেন্ট ব্যবহার করা হবে।

// app/routes/post.js
import Route from '@ember/routing/route';

export default class PostRoute extends Route {
  model(params) {
    // ডাইনামিক সেগমেন্ট থেকে post_id বের করে পোস্ট ফেচ করা হচ্ছে
    return this.store.find('post', params.post_id);
  }
}

এখানে, params.post_id ব্যবহার করে URL থেকে পোস্ট আইডি এক্সট্র্যাক্ট করে Post মডেল ফেচ করা হচ্ছে।

URL উদাহরণ

যখন অ্যাপ্লিকেশনটি /post/123 এ নেভিগেট করবে, তখন 123 হবে params.post_id এবং এই আইডি অনুযায়ী সংশ্লিষ্ট পোস্ট ডেটা লোড হবে।